0080. confirm
- 1. 🎯 本节内容
- 2. 🫧 评价
- 3. 📒
window.confirm() - 4. 💻 demos.1 - 使用
window.confirm()弹出确认提示框 - 5. 💻 demos.2 - 自定义 confirm 效果
- 6. 🔗 引用
1. 🎯 本节内容
window.confirm()
2. 🫧 评价
- 很简单的一个 API,类似
window.alert(),两者的区别是window.alert()是一个void类型的函数,而window.confirm()返回一个boolean类型的值。 - 实际开发中 confirm 提示框大多是直接使用 UI 组件库中封装好的 confirm 组件,或者自行封装,比如
demos.2。 - demos 概述
demos.1- 介绍 window.confirm 的基本使用demos.2- 自行封装了一个简单的 confirm 组件
3. 📒 window.confirm()
window.confirm()就是用来弹出一个提示框的,并会返回一个布尔值。- 如果用户点击了确定,返回
true - 如果用户点击了取消,返回
false
- 如果用户点击了确定,返回
- 弹出对话框时,会暂停脚本执行,直到用户点击了确定或者取消。
- 使用
window.confirm可以弹出一个确认提示框,但是无法自定义 UI。如果有修改 UI 的需求,可以考虑使用第三方库,或者自行编写一个简单的 confirm 组件来实现,比如demos.2。
4. 💻 demos.1 - 使用 window.confirm() 弹出确认提示框
js
if (window.confirm('您确定要重新加载此网站吗?')) {
// 用户点击了“确定”,执行重新加载操作
location.reload()
} else {
// 用户点击了“取消”,不做任何操作
}1
2
3
4
5
6
2
3
4
5
6
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="./1.js"></script>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
5. 💻 demos.2 - 自定义 confirm 效果
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自定义 Confirm 对话框</title>
<link rel="stylesheet" href="./1.css" />
</head>
<body>
<h1>自定义 Confirm 示例</h1>
<button id="showConfirm">点击弹出自定义确认框</button>
<script src="./1.js"></script>
<script>
document
.getElementById('showConfirm')
.addEventListener('click', async () => {
const result = await customConfirm(
'删除确认',
'你确定要删除这个项目吗?此操作不可撤销。',
{ confirmText: '删除', cancelText: '取消' }
)
if (result) {
alert('用户点击了“删除”')
} else {
alert('用户取消了操作')
}
})
</script>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
js
/**
* 自定义 confirm 函数
* @param {string} title - 对话框标题
* @param {string} message - 对话框内容
* @param {Object} options - 可选配置 { confirmText, cancelText }
* @returns {Promise<boolean>} 用户是否确认
*/
function customConfirm(
title = '确认操作',
message = '你确定要执行此操作吗?',
options = {}
) {
const { confirmText = '确定', cancelText = '取消' } = options
// 返回一个 Promise,以便异步使用
return new Promise((resolve) => {
// 创建遮罩层
const overlay = document.createElement('div')
overlay.className = 'custom-confirm-overlay'
// 创建对话框
const dialog = document.createElement('div')
dialog.className = 'custom-confirm'
dialog.innerHTML = `
<h3>${title}</h3>
<p>${message}</p>
<div class="custom-confirm-buttons">
<button class="custom-confirm-button cancel" data-action="cancel">${cancelText}</button>
<button class="custom-confirm-button confirm" data-action="confirm">${confirmText}</button>
</div>
`
// 添加事件监听
dialog
.querySelector('[data-action="cancel"]')
.addEventListener('click', () => {
overlay.remove()
resolve(false)
})
dialog
.querySelector('[data-action="confirm"]')
.addEventListener('click', () => {
overlay.remove()
resolve(true)
})
// 点击遮罩层关闭(可选)
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
overlay.remove()
resolve(false)
}
})
// 组装
overlay.appendChild(dialog)
document.body.appendChild(overlay)
})
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
css
body {
font-family: Arial, sans-serif;
padding: 20px;
}
button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
/* 遮罩层 */
.custom-confirm-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
/* 对话框主体 */
.custom-confirm {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
width: 300px;
text-align: center;
}
.custom-confirm h3 {
margin-top: 0;
color: #333;
}
.custom-confirm p {
color: #666;
margin-bottom: 20px;
}
.custom-confirm-buttons {
display: flex;
justify-content: center;
gap: 10px;
}
.custom-confirm-button {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.custom-confirm-button.confirm {
background-color: #007bff;
color: white;
}
.custom-confirm-button.cancel {
background-color: #6c757d;
color: white;
}
.custom-confirm-button:hover {
opacity: 0.9;
}
.custom-confirm-button:active {
transform: scale(0.98);
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

